需要准备的工作：

①、建立微信小程序工程，编写以下代码。

②、通过IDE建立springboot+web工程，编写接收文件以及提供下载文件的方式，并将上传的文件相关信息记录在mysql数据库中。具体请查看https://www.cnblogs.com/chenfeifen/p/10261980.html

一、配置index.wxml

1 
      2 
     
       3   
      
        4     
        上传原图 5     
        下载图片 6   
       7   
      
        8   
       
         9             
        10   
       11   
         
        12   
       13   
      14 
     

二、配置index.wxss

1  1 /**index.wxss**/ 2  2 .userinfo { 3  3   display: flex; 4  4   /* flex-direction: column; */ 5  5   align-items: center; 6  6 } 7  7 .imginfo { 8  8   display: flex; 9  9   flex-direction: column;10 10   align-items: center;11 11 }12 12 .userinfo-avatar {13 13   width: 128rpx;14 14   height: 128rpx;15 15   margin: 20rpx;16 16   border-radius: 50%;17 17 }18 18 19 19 .userinfo-nickname {20 20   color: #aaa;21 21 }22 22 23 23 .usermotto {24 24   margin-top: 200px;25 25 }

三、配置index.js

1 //index.js  2 //获取应用实例  3 const app = getApp()  4 Page({  5   /**  6    * 页面的初始数据  7    */  8   data: {  9     tempFilePaths: [], 10     downloadPicturePath:'' 11   }, 12   /** 13    * 上传图片方法 14    */ 15   upload: function () { 16     let that = this; 17     wx.chooseImage({ 18       count: 9, // 默认9 19       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 20       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 21       success: res => { 22         wx.showToast({ 23           title: '正在上传...', 24           icon: 'loading', 25           mask: true, 26           duration: 1000 27         })   28         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 29         let tempFilePaths = res.tempFilePaths; 30         that.setData({ 31           tempFilePaths: tempFilePaths 32         }) 33         /** 34          * 上传完成后把文件上传到服务器 35          */ 36         var count = 0; 37           //上传文件 38         for (var i = 0; i < this.data.tempFilePaths.length;i++){ 39           wx.uploadFile({ 40             url: "http://*****/upload",//请求上传的url 41             filePath: tempFilePaths[i], 42             name: 'filename', 43             header: { 44               "Content-Type": "multipart/form-data" 45             }, 46             success: function (res) { 47               count++; 48               //如果是最后一张,则隐藏等待中   49               if (count == tempFilePaths.length) { 50                 wx.hideToast(); 51               } 52               wx.showToast({ 53                 title: '上传成功', 54                 icon: '', 55                 mask: true, 56                 duration: 1500 57               })   58             }, 59             fail: function (res) { 60               wx.hideToast(); 61               wx.showModal({ 62                 title: '错误提示', 63                 content: '上传图片失败', 64                 showCancel: false, 65                 success: function (res) { } 66               }) 67             } 68           }); 69         } 70       } 71     }) 72   }, 73   /** 74    * 预览下载的图片 75    */ 76   preview_download_picture:function(){ 77       wx.previewImage({ 78         current: this.data.downloadPicturePath, 79         urls: this.data.downloadPicturePath, 80       }) 81   }, 82     /** 83    * 下载图片方法 84    */ 85   download:function(){ 86     var that = this; 87     wx.downloadFile({ 88        url:"http://******/download", //仅为示例，并非真实的资源 89       success: function (res) { 90         console.log(res) 91         // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容 92         if (res.statusCode === 200) { 93           wx.playVoice({ 94              filePath: res.tempFilePath 95           }) 96           wx.showToast({ 97             title: '下载成功', 98             icon: '', 99             mask: true,100             duration: 1500101           })102           that.setData({103             downloadPicturePath: res.tempFilePath//将下载的图片路径传给页面显示104           })105         }106         //保存下载的图片到本地107         // wx.saveImageToPhotosAlbum({
    108         //     filePath: res.tempFilePath,109         //   success:110         //     function (data) {
    111         //       console.log(data);112         //       // wx.showModal({
    113         //       //   title: '下载成功',114         //       //   content: '下载成功',115         //       // })116         //       wx.showToast({
    117         //         title: '下载成功',118         //         icon: '',119         //         mask: true,120         //         duration: 1500121         //       })  122         //       that.setData({
    123         //         downloadPicturePath: res.tempFilePath124         //       })125         //     },126         // })127       }128     });129   },130   /**131    * 预览图片方法132    */133   listenerButtonPreviewImage: function (e) {134     let index = e.target.dataset.index;135     let that = this;136     wx.previewImage({137       current: that.data.tempFilePaths[index],138       urls: that.data.tempFilePaths,139       //这根本就不走140       success: function (res) {141         //console.log(res);142       },143       //也根本不走144       fail: function () {145         //console.log('fail')146       }147     })148   },149 150   /**151    * 生命周期函数--监听页面加载152    */153   onLoad: function (options) {154     155   },156 157   /**158    * 生命周期函数--监听页面初次渲染完成159    */160   onReady: function () {161     162   },163 164   /**165    * 生命周期函数--监听页面显示166    */167   onShow: function () {168     169   },170 171   /**172    * 生命周期函数--监听页面隐藏173    */174   onHide: function () {175     176   },177 178   /**179    * 生命周期函数--监听页面卸载180    */181   onUnload: function () {182     183   },184 185   /**186    * 页面相关事件处理函数--监听用户下拉动作187    */188   onPullDownRefresh: function () {189     190   },191 192   /**193    * 页面上拉触底事件的处理函数194    */195   onReachBottom: function () {196     197   },198 199   /**200    * 用户点击右上角分享201    */202   onShareAppMessage: function () {203     204   }205 })